<template>
    <fieldset>
        <legend>父组件</legend>
        <childCom :gift="gift" @betMoney="handlebet" ref="childRef"></childCom>
        <h1>{{gift}}</h1> 
        <h2>下注金额：{{money}}</h2>
        <h2>余额：{{balance}}</h2>
        <button @click="handleclick">点击修改gift</button>
    </fieldset>
</template>
<script setup>
import childCom from "./child.vue"
// 何时使用响应式api？
// 一个核心就是这个变量需不需要放到模板中展示，如果需要放到模板中使用，那就需要使用响应式api来展示
import {onMounted, ref} from "vue"
// ref是包装的概念
// 模板中使用ref会自动解包
var gift = ref('初始值')
let handleclick =()=>{
    gift.value = '阿根廷'
}

// 子传父
// 下注金额
let money = ref(0)
let handlebet = (input)=>{
    console.log(input);
    money.value=input
}

// ref引用组件
let childRef=ref(null)
console.log(childRef);

// let {balance} = childRef.value
// let balance = "";
let balance = ref();
onMounted(()=>{
    balance.value = childRef.value.balance
    // console.log(childRef.value);
    // console.log(childRef.value.balance);
})

</script>